<template>
  <div class="custom-container p-5">
    <a-tabs type="card">
      <a-tab-pane key="1" :tab="'解调器状态'">
        <a-table class="ant-table-striped table1" :loading="tableLoading" :columns="columns" :data-source="dataList"
          size="middle" :rowKey="
                                                                        (record, index) => {
                                                                          return index;
                                                                        }
                                                                      "
          :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" :pagination="false">
          <template #action="{ record }">
            {{ record.chn_type == 0 ? '采集' : '采样' }}
          </template>
          <template #actions="{ record }">
            <Icon icon="subway:cercle-8" color="#52c41a" class="spanh2" :size="16" v-if="record.stat == 1" />
            <Icon icon="subway:cercle-8" color="#ff0000" class="spanh2" :size="16" v-else />
          </template>
  
        </a-table>
      </a-tab-pane>
      <template #tabBarExtraContent>
        <a-select ref="select" v-model:value="appStore.obj.ip" style="width: 100%" :placeholder="'请选择Modem'"
          allowClearget_mset>
          <a-select-option @click="changeck(item.ip, item.label)" :value="item.value" v-for="item in typeOptions"
            :key="item.id">{{
            item.ip
            }}</a-select-option>
        </a-select>
      </template>
    </a-tabs>
  
    <a-tabs type="card" style="margin-top: 30px">
      <a-tab-pane key="1" :tab="'采样数据'">
        <a-table class="ant-table-striped table1" :loading="tableLoading1" :columns="columns1" :data-source="dataList1"
          size="middle" :rowKey="
                                                                        (record, index) => {
                                                                          return index;
                                                                        }
                                                                      "
          :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" :pagination="false">
          <template #action="{ text, record, index}">
          {{ index+1 }}
        </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" :tab="'落盘数据'">
        <a-table class="ant-table-striped table1" :loading="tableLoading2" :columns="columns2" :data-source="dataList2"
          size="middle" :rowKey="
                                                                        (record, index) => {
                                                                          return index;
                                                                        }
                                                                      "
          :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" :pagination="false">
          <template #action="{ record }">
            <a-button type="link">修改主体</a-button>
          </template>
          <template #actions="{ text, record, index}">
          {{ index+1 }}
        </template>
        </a-table>
      </a-tab-pane>
      <!-- <template #tabBarExtraContent>
                                                                    <a-button
                                                                      style="margin-left: 20px"
                                                                      preIcon="ant-design:edit"
                                                                      color="primary"
                                                                      iconSize="16"
                                                                      @click="do_export"
                                                                      >修改卫星经纬度</a-button
                                                                    >
                                                                  </template> -->
    </a-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue';
import { get_log } from '/@/api/biz/index';
import { useI18n } from '/@/hooks/web/useI18n';
import { get_channel } from "/@/api/biz/index";
import { useAppStore } from '/@/store/modules/app.ts';
import { Icon } from '/@/components/Icon';
import axios from 'axios'

export default defineComponent({
  components: {
    Icon
  },
  setup() {
    const tableLoading: Boolean = ref(true)
    const tableLoading1: Boolean = ref(true)
    const tableLoading2: Boolean = ref(true)
    const { t } = useI18n();
    const appStore = useAppStore();
    const columns = [
      {
        title: t('routes.demo.inet.channel_number'),
        align: "center",
        dataIndex: 'chn',
      },
      {
        title: t('routes.demo.inet.center_frequency'),
        align: "center",
        dataIndex: 'cf',
      },
      {
        title: t('routes.demo.inet.symbol_rate'),
        align: "center",
        dataIndex: "rt"
      },
      {
        title: t('routes.demo.inet.channel_locking'),
        align: "center",
        dataIndex: 'lock',
        slots: { customRender: 'action1' },
      },
      {
        title: t('routes.demo.inet.decoding_lock'),
        align: "center",
        dataIndex: 'de_lock',
        slots: { customRender: 'action2' },
      },
      {
        title: t('routes.demo.inet.demodulation_lock'),
        align: "center",
        dataIndex: 'demod_lock',
        slots: { customRender: 'action3' },
      },
      {
        title: t('routes.demo.inet.signal_power'),
        align: "center",
        dataIndex: 'sp',
      },
      {
        title: t('routes.demo.inet.signal_to_noise_ratio'),
        align: "center",
        dataIndex: 'snr',

      },
      {
        title: t('routes.demo.inet.error_rate'),
        align: "center",
        dataIndex: 'ser',

      },
      {
        title: t('routes.demo.inet.frequency_offset'),
        align: "center",
        dataIndex: 'fs',
      },
      {
        title: '用途',
        align: "center",
        dataIndex: 'chn_type',
        slots: { customRender: 'action' },
      },
      {
        title: '状态',
        align: "center",
        dataIndex: 'stat',
        slots: { customRender: 'actions' },
      },

    ]
    const queryParams3 = ref({
      cpn: 1,
      epc: 10,
      ip: '192.168.3.172',
    })
    queryParams3.ip = appStore.obj.ip
    const dataList = ref([
      // {
      //   item1: '--', //中心频率
      //   item2: '--', //Modulation
      //   item3: '--', //符号速率
      //   item4: '--', //信噪比
      //   item5: '--', //标准
      //   item6: '--', //Pilots
      //   item7: '--', //编码方式
      //   item8: '--', //Puncture_rate
      //   item9: '--', //帧长类型
      //   item10: '--', //滚降系数
      //   item11: '--', //滚降系数
      //   rts:0
      // },
      // {
      //   item1: '--', //中心频率
      //   item2: '--', //Modulation
      //   item3: '--', //符号速率
      //   item4: '--', //信噪比
      //   item5: '--', //标准
      //   item6: '--', //Pilots
      //   item7: '--', //编码方式
      //   item8: '--', //Puncture_rate
      //   item9: '--', //帧长类型
      //   item10: '--', //滚降系数
      //   item11: '--', //滚降系数
      //   rts:1
      // },
      // {
      //   item1: '--', //中心频率
      //   item2: '--', //Modulation
      //   item3: '--', //符号速率
      //   item4: '--', //信噪比
      //   item5: '--', //标准
      //   item6: '--', //Pilots
      //   item7: '--', //编码方式
      //   item8: '--', //Puncture_rate
      //   item9: '--', //帧长类型
      //   item10: '--', //滚降系数
      //   item11: '--', //滚降系数
      // },
      // {
      //   item1: '--', //中心频率
      //   item2: '--', //Modulation
      //   item3: '--', //符号速率
      //   item4: '--', //信噪比
      //   item5: '--', //标准
      //   item6: '--', //Pilots
      //   item7: '--', //编码方式
      //   item8: '--', //Puncture_rate
      //   item9: '--', //帧长类型
      //   item10: '--', //滚降系数
      //   item11: '--', //滚降系数
      // },
    ]);
    async function getList3() {
      get_channel(queryParams3).then(res => {
        if (res.data.data.result.data.length > 0) {
          dataList.value = res.data.data.result.data
          tableLoading.value = false
        } else if (res.data.data.result.data.code == 500 || res.data.data.result.data.code == 502) {
          dataList.value = []
          tableLoading.value = false
        } else {
          tableLoading.value = true
        }
      })
    }
    const columns1 = [
      {
        title: '序号',
        dataIndex: 'id',
        slots: { customRender: 'action' },
      },
      {
        title: '采集时间',
        dataIndex: 'update_time',
      },
      {
        title: '卫星名称',
        dataIndex: 'sat_name',
      },
      {
        title: '中心频率',
        dataIndex: 'fc',
      },
      {
        title: '符号速率',
        dataIndex: 'rs',
      },
      {
        title: '网络信令',
        dataIndex: 'item6',
      },
      {
        title: '文件路径',
        dataIndex: 'output_path',
      },
    ];
    const dataList1 = ref([
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
    ]);
    const columns2 = [
      {
        title: '序号',
        dataIndex: 'id',
        slots: { customRender: 'actions' },
      },
      {
        title: '采集时间',
        dataIndex: 'update_time',
      },
      {
        title: '卫星名称',
        dataIndex: 'sat_name',
      },
      {
        title: '中心频率',
        dataIndex: 'fc',
      },
      {
        title: '符号速率',
        dataIndex: 'rs',
      },
      {
        title: '处理方式',
        dataIndex: 'data_processing',
      },
      {
        title: '文件路径',
        dataIndex: 'output_path',
      },
      {
        title: '文件大小',
        dataIndex: 'file_size',
      },
      {
        title: '数据摘要',
        dataIndex: 'process_log',
      },
    ];
    const dataList2 = ref([
      {
        id: '--', //中心频率
        update_time: '--', //Modulation
        sat_name: '--', //符号速率
        fc: '--', //信噪比
        rs: '--', //标准
        item6: '--', //Pilots
        output_path: '--', //编码方式
      },
      {
        id: '--', //中心频率
        update_time: '--', //Modulation
        sat_name: '--', //符号速率
        fc: '--', //信噪比
        rs: '--', //标准
        item6: '--', //Pilots
        output_path: '--', //编码方式
      },
      {
        id: '--', //中心频率
        update_time: '--', //Modulation
        sat_name: '--', //符号速率
        fc: '--', //信噪比
        rs: '--', //标准
        item6: '--', //Pilots
        output_path: '--', //编码方式
      },
      {
        id: '--', //中心频率
        update_time: '--', //Modulation
        sat_name: '--', //符号速率
        fc: '--', //信噪比
        rs: '--', //标准
        item6: '--', //Pilots
        output_path: '--', //编码方式
      },
      {
        id: '--', //中心频率
        update_time: '--', //Modulation
        sat_name: '--', //符号速率
        fc: '--', //信噪比
        rs: '--', //标准
        item6: '--', //Pilots
        output_path: '--', //编码方式
      },
      {
        id: '--', //中心频率
        update_time: '--', //Modulation
        sat_name: '--', //符号速率
        fc: '--', //信噪比
        rs: '--', //标准
        item6: '--', //Pilots
        output_path: '--', //编码方式
      },
      {
        id: '--', //中心频率
        update_time: '--', //Modulation
        sat_name: '--', //符号速率
        fc: '--', //信噪比
        rs: '--', //标准
        item6: '--', //Pilots
        output_path: '--', //编码方式
      },
      {
        id: '--', //中心频率
        update_time: '--', //Modulation
        sat_name: '--', //符号速率
        fc: '--', //信噪比
        rs: '--', //标准
        item6: '--', //Pilots
        output_path: '--', //编码方式
      },
    ]);

    function sampl() {
      //采样
      axios.get(`/api/sampl?ip=${appStore.obj.ip}`).then((res) => {
        if (res.data.data.result.data.length > 0) {
          dataList1.value = res.data.data.result.data
          tableLoading1.value = false
        } else if (res.data.data.result.data.code == 500 || res.data.data.result.data.code == 502) {
          dataList1.value = []
          tableLoading1.value = false
        } else {
          tableLoading1.value = true
        }
      })
    }
    function rockfall() {
      //落盘
      axios.get(`/api/rockfall?ip=${appStore.obj.ip}`).then((res) => {
        if (res.data.data.result.data.length > 0) {
          dataList2.value = res.data.data.result.data
          tableLoading2.value = false
        } else if (res.data.data.result.data.code == 500 || res.data.data.result.data.code == 502) {
          dataList2.value = []
          tableLoading2.value = false
        } else {
          tableLoading2.value = true
        }
      })

    }

    const typeOptions = ref([
      // {
      //   value: '1',
      //   label: 'M710a',
      //   ip:'128.23.12.4'
      // },
      // {
      //   value: '2',
      //   label: 'M650',
      // },
    ]);
    function get_list() {
      axios.get('/api/modem').then((res) => {
        res.data.data.result.data.forEach((item) => {
          typeOptions.value.push({
            value: item.id,
            label: item.mtype,
            ip: item.ip,
          })
          appStore.obj.ip = res.data.data.result.data[0].ip
        })
      })
    }

    let select1 = ref();
    select1.value = appStore.obj.type || null
    function changeck(ip: string, type: string) {
      appStore.setIp(type, ip)
      queryParams3.ip = appStore.obj.ip
      // sampl();
      // rockfall();
      // getList3()
    }
    function changeSwitch(checked, stat) {
      console.log(checked, stat)
      // 根据开关状态设置 stat.stat 的值
      stat.stat = checked ? 2 : 0;
      // 这里可以执行其他操作，例如发送请求或更新数据
    }

    let timerId1: ReturnType<typeof setInterval> | null;
    onMounted(() => {
      getList3();
      get_list();
      sampl();
      rockfall();
      timerId1 = setInterval(() => {
        getList3();
        sampl();
        rockfall();
      }, 30000);
    });
    onBeforeUnmount(() => {
      timerId1 && window.clearInterval(timerId1);
    });
    // watch(() => queryParams3.ip, (newValue) => {
    //   console.log(newValue, '搜索查询里的watch')
    // })
    watch(
      appStore.obj,
      (newValue, oldValue) => {
        sampl();
        rockfall();
        getList3()
      },
      {
        deep: true // 开启深度监听
      }
    );
    return {
      dataList,
      columns,
      dataList1,
      columns1,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      typeOptions,
      select1,
      getList3,
      rockfall,
      sampl,
      get_list,
      queryParams3,
      appStore,
      t,
      changeck,
      columns2,
      dataList2,
      changeSwitch,
      tableLoading,
      tableLoading1,
      tableLoading2
    };
  },
});
</script>

<style lang="less" scoped>
.spane1 {
  color: #0960bd;
  cursor: pointer;
}

.list1 {
  padding: 20px 0;
}

.content1 {
  padding: 15px 0;
  text-indent: 24px;
}

.hh1 {
  line-height: 34px;
  text-align: center;
  font-weight: bold;
}

.dd1 {
  line-height: 34px;
}

.dd2 {
  line-height: 34px;
  text-indent: 24px;
}

.dd3 {
  line-height: 34px;
  text-indent: 24px;
  float: right;
  margin: 20px 0;
}

.coll1 {
  margin-bottom: 50px;
}

.table1 {
  border: 1px solid #fff;
}

::v-deep .ant-select-selector {
  color: #fff;
}
</style>
